<template>
  <div class="c-ph34 c-pv30 c-w100 c-h100vh c-bg-white c-scroll-touch">
    <template v-if="isExpired">
      <div class="c-flex-column c-flex-center c-justify-center c-pv32">
        <img class="c-ww250" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/fashou/delist.png"/>
        <span class="c-fs24 c-fc-gray c-lh34" >活动已被删除/下架</span>
      </div>
    </template>
    <template v-else-if="detailForm">
      <div class="c-fc-191919 c-fs36 c-lh50 c-mb18 c-fw-b500">{{ detailForm.letterName }}</div>
      <div class="c-fs24 c-mb40 c-lh48 c-flex-row c-flexw-wrap">
        <span v-if="detailForm.isOriginal==1" class="c-flex-row c-aligni-center c-justify-center">
          <span class="c-fc-B2B2B2 c-fs20 c-hh32 c-ww52 c-bg-f2 c-mr20 c-br4 c-flex-row c-aligni-center c-justify-center">原创</span>
        </span>
        <span v-if="detailForm.authorName" class="c-fc-B2B2B2 c-mr20 ">{{ detailForm.authorName }}</span>
        <span class="c-fc-5C6F98 c-mr20" @click="goOfficial">{{ detailForm.officialAccountName }}</span>
        <span class="c-fc-B2B2B2 c-mr20">{{ detailForm.createdAt }}</span>
        <span class="c-fc-B2B2B2 c-mr20">{{ detailForm.address }}</span>
        <div class="c-fs24 c-flex-row c-aligni-center c-fc-5C6F98">
          <img :src="liTingImg" class="c-mr12 c-ww24 c-hh24 c-br10"/>
          {{ numFormat(Number(detailForm.playInitNum+detailForm.realReadNum)) }}人听过
        </div>
      </div>
      <div class="c-fs24 c-lh46 c-bg-white c-contextX-hidden c-w100">
        <span v-if="detailHtml" v-html="detailHtml"></span>
      </div>

      <!-- 喜欢作者 -->
      <div v-if="detailForm.openLike==1" class="c-flex-column c-aligni-center c-mt60">
        <img :src="detailForm.authorCover" class="c-mr12 c-ww80 c-hh80 c-br10"/>
        <div class="c-fc-191919 c-fs22 c-mt26">{{ detailForm.authorName }}</div>
        <div class="c-mt40" @click="likeAuthor">
          <div class="c-fc-white c-bg-F95151 c-br16 c-ph72 c-flex-row c-aligni-center c-fs28 c-pv20">
            <i v-show="!detailForm.hasLike" class="iconfont icon-dianzan c-fs30 c-mr16"></i>
            <i v-show="!!detailForm.hasLike" class="iconfont icon-dianzanbeifen c-fs30 c-mr16 c-fc-white"></i>
            <span>喜欢作者</span>
          </div>
        </div>
        <div class="c-fs22 c-lh32 c-mt60 c-mb60 c-flex-row c-aligni-center c-justify-center">
          <span class="shortLine"></span>
          <span class="c-fc-737373 c-ph30">{{ detailForm.likeCount }}人喜欢</span>
          <span class="shortLine"></span>
        </div>
      </div>

      <div class="c-pb140 " :class="detailForm.openLike==1?'':'c-mt60'">
        <div class="c-fs22">
          <span class="c-fc-B2B2B2">阅读<span class="c-ml10">{{ detailForm.readNum }}</span>
          </span>
        </div>
        <!-- <div class="c-mt40 c-pb40 c-flex-row c-aligni-center">
          <img :src="detailForm.officialAccountCover" class="c-mr12 c-ww52 c-hh52 c-brp50" @click="goOfficial"/>
          <span class="c-fc-1D1D1D c-fs24 c-fw500" @click="goOfficial">{{ detailForm.officialAccountName }}</span>
        </div> -->
      </div>

      <div class="c-pf c-p-b0 c-p-l0 c-w100 c-pb20 c-bg-white c-pz99">
        <div class="c-hh96 c-lh96 c-w100 c-bg-white c-ph32 c-flex-row c-aligni-center c-justify-sb borderE9">
          <div class="c-flex-row c-aligni-center">
            <img :src="detailForm.officialAccountCover" class="c-mr12 c-ww52 c-hh52 c-brp50"/>
            <div class="c-text-ellipsis1 c-fc-1D c-fs22 c-fw-b500"  :class="detailForm.officialAccountName&&detailForm.officialAccountName.length>4?'c-ww120':''">{{ detailForm.officialAccountName }}</div>
            <span class="c-fc-1D c-fs20 c-bg-f2 c-br6 c-fw-b500 c-ww76 c-hh44 c-flex-row c-aligni-center c-justify-center c-ml8" @click="goOfficial">+ 关注</span>
          </div>
          <div class="c-flex-row c-aligni-center">
            <div @click="operateType(2,detailForm.hasRcLike==0?1:0)" class="c-flex-column c-aligni-center c-ww70">
              <img :src="detailForm.hasRcLike==0?likeImg:likedImg" class="c-ww36 c-hh36 "/>
              <span class="c-fs20" :class="detailForm.hasRcLike==0?'c-fc-1D':'c-fc-FA5151'">{{ numFormat(Number(detailForm.likeInitNum + detailForm.likeNum))}}</span>
            </div>
            <div @click="shareClick" class="c-flex-column c-aligni-center c-ww70">
              <img :src="transmitImg" class="c-ww36 c-hh36"/>
              <span class="c-fs20 c-fc-1D">{{ numFormat(Number(detailForm.shareInitNum + detailForm.realReadNum)) }}</span>
            </div>
            <div @click="operateType(4,detailForm.hasView==0?1:0)" class="c-flex-column c-aligni-center c-ww70">
              <img :src="detailForm.hasView==0?reviewImg : reviewedImg" class="c-ww36 c-hh36 "/>
              <span class="c-fs20" :class="detailForm.hasView == 0?'c-fc-1D':'c-fc-FFC300'">{{ numFormat(Number(detailForm.viewInitNum + detailForm.viewNum))}}</span>
            </div>
            <div @click="commentClick" class="c-flex-column c-aligni-center c-ww70">
              <img :src="commentImg" class=" c-ww36 c-hh36"/>
              <span class="c-fs20 c-fc-1D">{{ numFormat(detailForm.commentInitNum) }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <FollowOffiaccount v-if="detailForm &&detailForm.officialAccountQrCode" :showOffaccountQr.sync="showOffaccountQr" :officialAccountQrCode="detailForm.officialAccountQrCode" />
  </div>
</template>

<script>
import FollowOffiaccount from "@/components/templates/fashou/followOffiaccount.vue";
import { utilJs } from "@/utils/common.js";

export default {
  components:{
    FollowOffiaccount
  },

  props:{},

  data() {
    return {
      transmitImg: 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/fashou/zhuanfa.png',
      likeImg: 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/fashou/like.png',
      likedImg: 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/fashou/liked.png',
      liTingImg: 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/fashou/liTing.png',
      reviewImg: 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/fashou/review.png',
      reviewedImg: 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/fashou/reviewed.png',
      commentImg:'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/fashou/comment.png',
      isExpired: false,
      detailForm:null,
      detailHtml:'',
      showOffaccountQr:false
    }
  },
  created() {
    this._id = this.$route.query.id;
    this._refereeId = localStorage.getItem('refereeId') || this.$route.query.refereeId || '';
    this.getDetail();
  },

  methods:{
    numFormat(val) {
      if (val >= 10000) {
        let tem = (val / 10000).toFixed(1)
        let showNum = tem + '万'
        return showNum
      } else {
        return val
      }
    },
    operateType(type, operate) {
      const $this = this
      const sendData = {
        rcId: this._id,
        type:type,
        operate: operate
      }

      utilJs.postMethod(`${global.fashouApiUrl}releaseCloud/operate`, sendData, res => {
        if (type == 2) {
          $this.detailForm.likeNum = operate == 0 ? $this.detailForm.likeNum - 1 : $this.detailForm.likeNum + 1
          $this.detailForm.hasRcLike = !$this.detailForm.hasRcLike
        }
        if (type == 4) {
          $this.detailForm.viewNum = operate == 0 ? $this.detailForm.viewNum - 1 : $this.detailForm.viewNum + 1
          $this.detailForm.hasView = !$this.detailForm.hasView
        }
      });
    },
    shareClick() {
      this.$showCjToast({
        text: "请点击右上角分享",
        type: "text",
      })
    },
    commentClick() {
      this.$showCjToast({
        text: "评论已隐藏，暂无法查看",
        type: "text",
      })
    },
    goOfficial() {
      this.showOffaccountQr = true;
    },
    getDetail() {
       utilJs.getMethod(global.fashouApiUrl + `releaseCloud/detail?id=${this._id}&refereeId=${this._refereeId}&type=1&isSkeleton=1`, res => {
        if (res.errorCode == 1 || res.activityStatus == -1) {
          this.isExpired = true;
          return;
        }
        this.detailForm = res;
        setDocumentTitle(this.detailForm.officialAccountName);
        this.wechatShare();
        this.initDetailHtml();
       });
    },
    initDetailHtml() {
      utilJs.getPageHtml(this.detailForm.detailInfo, (res) => {
        this.detailHtml = res;
      }, () => {
        this.detailHtml = '';
      })
    },
    likeAuthor() {
      if (this.detailForm.hasLike != 1) {
        this.detailForm.likeCount++;
        this.detailForm.hasLike = 1;
        const sendData = {
          id: this._id
        }
        utilJs.postMethod(global.fashouApiUrl + `releaseCloud/saveLike`, sendData, res => {
          this.$showCjToast({
            text: "点赞成功",
            type: "success",
          })
        })
      } else {
        this.$showCjToast({
          text: "您已点赞",
          type: "warn",
        })
      }
    },
    wechatShare() {
      let title = this.detailForm.letterName;
      let desc = this.detailForm.shareTitle || '点击查看';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?id=${this.detailForm.id}&refereeId=${localStorage.getItem("userId")}`;
      let imgUrl = this.detailForm.cover;
      utilJs.wechatConfig(shareUrl, title, imgUrl, desc, function () { });
    },
  },

}
</script>

<style scoped>
.shortLine{
  width: 70px;
  height: 1px;
  background: #F0F0F0;
}
.borderE9 {
  border-top: 0.5px solid #E9E9E9;
}
</style>